import {
    PanelBody,
    TextControl,
    BaseControl,
    SelectControl,
    Button,
    CheckboxControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { InspectorControls } from '@wordpress/block-editor';


import { AttributesPropsAndSetter } from '../../types';

export const Sidebar = ({ attributes, setAttributes }: AttributesPropsAndSetter) => {
    return (<InspectorControls>
        <PanelBody
            title={__('Theme Settings', 'container-pro')}
            initialOpen={true}>
            <div className="container-pro-editor">
                <BaseControl id="container-pro-select-theme">
                    <SelectControl onChange={(e) => { setAttributes({ theme: e }); }}
                        options={[{ label: 'Success', value: 'Success' }, { label: 'Warning', value: 'Warning' }]}
                        onChange={(v) => setAttributes({ theme: v })}
                    ></SelectControl>
                </BaseControl>
            </div>
        </PanelBody>
    </InspectorControls >);
}